<template>
    <div class="page">
        <span class="page-title" :data-font="$i18n.locale">{{ $t('application.home.title') }}</span>
        <div class="page-line"></div>
        <div class="page-info">
            <p :data-font="$i18n.locale">{{ $t('application.home.p1') }}</p>
            <p :data-font="$i18n.locale">{{ $t('application.home.p2') }}</p>
            <p :data-font="$i18n.locale">{{ $t('application.home.p3') }}<i>{{ $t('application.home.i') }}</i>{{
                $t('application.home.p4')
            }}</p>
            <p :data-font="$i18n.locale">{{ $t('application.home.p5') }}<i>{{ $t('application.home.i') }}</i>{{
                $t('application.home.p6')
            }}</p>
            <p :data-font="$i18n.locale">{{ $t('application.home.p7') }}</p>
        </div>
        <div class="tabs">
            <router-link to="/limitedTime/rules/routine" :data-font="$i18n.locale">
                <el-image :src="require('@/assets/img/application/常规赛.png')"></el-image>
                <div class="tab-title" v-if="$i18n.locale == 'zh'" :data-font="$i18n.locale">常规赛</div>
                <div class="tab-title" v-if="$i18n.locale == 'en'" :data-font="$i18n.locale">Regular</div>
                <div class="border" :data-have="list.one" :data-cont="$t('application.home.cont')"></div>
            </router-link>
            <router-link to="/limitedTime/rules/bacteria" :data-font="$i18n.locale">
                <el-image :src="require('@/assets/img/application/细菌博弈.png')"></el-image>
                <div class="tab-title" v-if="$i18n.locale == 'zh'" :data-font="$i18n.locale">细菌博弈赛</div>
                <div class="tab-title" v-if="$i18n.locale == 'en'" :data-font="$i18n.locale">
                    SynBio<br>Foundry-Bacterial<br>Gladiator</div>
                <div class="border" :data-have="list.two" :data-cont="$t('application.home.cont')"></div>
            </router-link>
            <router-link to="/limitedTime/rules/protein" :data-font="$i18n.locale">
                <el-image :src="require('@/assets/img/application/蛋白设计.png')"></el-image>
                <div class="tab-title" v-if="$i18n.locale == 'zh'" :data-font="$i18n.locale">蛋白设计赛</div>
                <div class="tab-title" v-if="$i18n.locale == 'en'" :data-font="$i18n.locale">
                    SynBio<br>Foundry-Protein<br>Designer</div>
                <div class="border" :data-have="list.three" :data-cont="$t('application.home.cont')"></div>
            </router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import { matchs } from "@/request/api"
export default {
    data() {
        return {
            list: {
                one: false,
                two: false,
                three: false
            }
        }
    },
    mounted() {
        if (this.$store.state.token) {
            this.addMatches();
        }
    },
    methods: {
        addMatches() {
            matchs().then(res => {
                if (res.data.resultCode === '200') {
                    this.list.one = res.data.data[1].apply;
                    this.list.two = res.data.data[0].apply;
                    this.list.three = res.data.data[2].apply;
                }
            })
        },

    }
}
</script>
<style lang="less" scoped>
.page {
    width: 32rem;
    margin: 0 auto;
    padding-top: 1.6rem;
    height: auto;

    .page-title {
        display: inline-block;
        height: 1.92rem;
        font-size: 1.17rem;
        font-weight: bold;
        color: #212121;
        line-height: 1.92rem;
        position: relative;
    }

    .page-title[data-font='zh'] {
        font-family: 'AlibabaPuHuiTi-Bold', 'AlibabaPuHuiTi';
    }

    .page-title[data-font='en'] {
        font-family: 'RNSSanzSC-Bold, RNSSanzSC';
    }

    .page-title::after {
        content: "";
        width: 0.43rem;
        height: 0.43rem;
        background: url(@/assets/img/icon-title.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: -0.5rem;
        bottom: 0.4rem;
    }

    .page-line {
        width: 20.83rem;
        height: 0.03rem;
        background: #212121;
        margin: 0.85rem 0 1.44rem 0;
    }

    .page-info {
        width: 32rem;
        margin-bottom: 2.88rem;

        p {
            font-size: 0.53rem;
            font-weight: normal;
            color: #68656C;
            line-height: 0.85rem;
            letter-spacing: 0.05rem;
            margin-bottom: 0.84rem;
        }

        p[data-font='en'] {
            font-family: 'Helvetica';
        }

        p[data-font='zh'] {
            font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
        }

        i {
            color: #7709CC;
            font-style: normal;
        }
    }

    .tabs {
        width: 32rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2.4rem;

        .border[data-have=true]::before {
            content: attr(data-cont);
            background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);
            border-radius: 2.67rem 0rem 0rem 2.67rem;
            position: absolute;
            right: 0;
            bottom: 0.11rem;
            font-size: 0.32rem;
            font-weight: normal;
            color: #FFFFFF;
            line-height: 0.48rem;
            padding: 0.03rem 0 0.03rem 0.21rem;
        }

        .border[data-font='zh'] {
            font-family: 'IdeaFonts-DianHei-EEJ', 'IdeaFonts-DianHei';
        }


        a {
            display: inline-block;
            padding: 0.43rem 0.43rem 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;

            .el-image {
                width: 8.83rem;
                height: 7.79rem;
                z-index: 2;
                transition: transform 0.4s cubic-bezier(0.42, 0.00, 0.58, 1.00);
            }

            .tab-title {
                z-index: 2;
                font-size: 1.17rem;
                font-weight: bold;
                color: #68656C;
                text-align: center;
            }

            .tab-title[data-font='zh'] {
                line-height: 1.92rem;
                padding: 0.64rem 0;
                font-family: 'AlibabaPuHuiTi-Bold', 'AlibabaPuHuiTi';
            }

            .tab-title[data-font='en'] {
                line-height: 1.44rem;
                padding: 0.53rem 0 0.64rem 0;
                font-family: 'RNSSanzSC-Bold, RNSSanzSC';
            }

            .border {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                border: 0.05rem solid;
                border-image: linear-gradient(180deg, #FFFFFF, #FFFFFF) 1;
                background: linear-gradient(315deg, rgba(250, 251, 255.0.25) 0%, rgba(252, 248, 255, 0.25) 100%);
                backdrop-filter: blur(10px);
                transition: all 0.4s cubic-bezier(0.42, 0.00, 0.58, 1.00);
            }
        }

        a[data-font='en'] {
            height: 13.71rem;
        }

        .router-link-exact-active {
            .tab-title {
                color: #7709CC !important;
            }

            .border {
                transform: perspective(1px) scale(1.08);
                border: 0.05rem solid;
                border-image: linear-gradient(315deg, rgba(38, 87, 255, 0.75), rgba(159, 34, 255, 0.75)) 1;
            }

            .el-image {
                transform: perspective(1px) scale(1.08);
            }
        }

    }


}
</style>